<template>
	<view>
		<!-- 顶部搜索 -->
		<view class="top-tabber-search">
			<view :style="{height:statuHeight+'px'}"></view>
			<view class="tba-search-box">
				<view class="iconfont" @click="backClick">&#xe614;</view>
				<view class="search-input">
					<view class="iconfont search-icon">&#xe6aa;</view>
					<input class="uni-input" placeholder="搜索你感兴趣的资源库" v-model="fromData.keyword" @input="queryVideo"
					placeholder-style="font-size: 12px;font-family:PingFang SC;font-weight: 500;color: #E0E0E0;"/>
				</view>
				<view class="search-name">搜索</view>
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="main">
			<!-- 历史记录 -->
			<view class="history-box">
				<view class="history-delter">
					<view class="history">历史记录</view>
					<view class="delter-icon">
						<view class="iconfont" @click="backClick">&#xe619;</view>
						<view>清除</view>
					</view>
				</view>
				<view>
					<view class="record-name" v-for="(item,index) in historyList" :key="item.id">{{item.name}}</view>
				</view>
			</view>
			<!-- 推荐影片 -->
			<view class="recmd-video-box">
				<view class="recmd-video">推荐影片</view>
				<view class="recmd-text-img" v-for="(item,index) in recmdList" :key="item.id">
					<view class="img-box">
						<image class="img" :src="item.url"></image>
					</view>
					<view class="name-box">
						<view class="text-name" v-for="(i,k) in item.textList" :key="i.id">{{k+1}}、{{i.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { $POST, $GET } from '@/network/api.js'
	export default {
		data() {
			return {
				fromData: {
					keyword: "",
					pageNum: 1,
					pageSize: 10
				},
				searchList: [], // 搜索数据
				recmdList: [
					{
						id: 1,
						url: '/static/special/special_a.jpg',
						textList: [
							{ id: 1, name: "加拿大史上最大彩票周"},{ id: 2, name: "加拿大史上最大彩票周"},
							{ id: 1, name: "加拿大史上最大彩票周"},{ id: 2, name: "加拿大史上最大彩票周"},
							{ id: 1, name: "加拿大史上最大彩票周"},{ id: 2, name: "加拿大史上最大彩票周"}
						],
					},
					{
						id: 2,
						url: '/static/special/special_b.jpg',
						textList: [
							{ id: 1, name: "加拿大史上fdas最大彩票周"},{ id: 2, name: "加拿asds大史上最大彩票周"},
							{ id: 3, name: "加拿大史上df最大彩票周"},{ id: 4, name: "加拿大史dfs上最大彩票周"},
						],
					}
				],
				historyList: [
					{ id: 1, name: "木木搜索"},{ id: 2, name: "木木搜索"},{ id: 3, name: "木搜索木"},
					{ id: 4, name: "木搜索木"},{ id: 5, name: "木搜索木"},{ id: 6, name: "木搜索木"},
					{ id: 7, name: "木木"},{ id: 8, name: "木木"},{ id: 9, name: "木木"},
					{ id: 10, name: "木木"},{ id: 11, name: "啊木木"},{ id: 12, name: "啊木木"},
					{ id: 13, name: "啊木木"},{ id: 14, name: "啊木木"},{ id: 15, name: "啊木木"},
				],
				statuHeight: uni.getSystemInfoSync().statusBarHeight,
			}
		},
		methods:{
			// 查询
			async queryVideo() {
				const res = await $POST('/boke-item/search/getVideo',this.fromData)
				if(res.code === "0000000") {
					this.searchList = res.data
				}
			},
			// 返回上一页
			backClick() {
				uni.switchTab({
				  url: '/pages/home/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-tabber-search{
		background: #5B2177;
		.tba-search-box{
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 60rpx 0 41rpx;
			.iconfont{
				color: #FFFFFF;
			}
			.search-input{
				width: 480rpx;
				height: 58rpx;
				background: rgba(173, 144, 187,0.5);
				border-radius: 29rpx;
				display: flex;
				align-items: center;
				.search-icon{
					margin: 0 11rpx 0 24rpx;
					color: #E0E0E0;
				}
				.uni-input{
					width: 419rpx;
					height: 58rpx;
					line-height: 58rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
				}
			}
			.search-name{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
	
	.main{
		padding: 0rpx 24rpx;
		// 历史记录
		.history-box{
			margin-bottom: 48rpx;
			.history-delter{
				padding: 20rpx 16rpx 20rpx 7rpx;
				border-bottom: 1px solid #EEEEEE;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.history{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.delter-icon{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
					.iconfont{
						margin-right: 8rpx;
					}
				}
			}
			.record-name{
				display: inline-block;
				padding: 8rpx 25rpx;
				border: 1rpx solid #999999;
				border-radius: 25rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				margin: 23rpx 20rpx 0 0;
			}
		}
		// 推荐影片
		.recmd-video-box{
			padding: 0rpx 16rpx 0rpx 7rpx;
			.recmd-video {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-bottom: 15px;
			}
			.recmd-text-img{
				display: flex;
				align-items: center;
				margin-bottom: 23rpx;
				
				.img-box{
					width: 340rpx;
					height: 192rpx;
					border-radius: 10rpx;
					margin-right: 26rpx;
					.img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.name-box{
					height: 192rpx;
					overflow: hidden;
				}
				.text-name{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					margin-bottom: 22rpx;
				}
				 .text-name:nth-of-type(1){
					 color: #FF1854 !important;
				 }
				.text-name:last-child{
					margin-bottom: 0 !important;
				}
			}
		}
	}

</style>
